<!-- DrawerTable.vue -->
<template>
  <div class="drawer-container">
    <el-drawer
      v-model="drawerVisible"
      :with-header="true"
      @close="handleClose"
      :append-to-body="true"
      size="66%"
      :custom-class="'drawer-animated'"
    >
      <!-- 自定义头部 -->
      <template #header>
        <div class="title-panel">
          <div>
            <span class="tracker-label">标题</span>
          </div>
          <div>
            <span class="detail-header-author-name">{{ currentUser }}</span>
          </div>
          <div>
            <span class="detail-header-create-time"
              >创建于{{ nodeData.create_time }}
            </span>
          </div>
          <div>
            <span class="detail-header-project-name">项目名称 </span>
          </div>
        </div>
      </template>
      <div class="content">
        <!-- 工作项 -->
        <div class="work-item-area">
          <div class="detail-id">#{{ nodeData.id }}</div>
          <div
            v-if="!isDetailLabelEditing"
            @click="startEditing"
            class="detail-label"
          >
            {{ nodeData.label }}
          </div>
          <div v-if="isDetailLabelEditing" class="detail-label">
            <el-input
              class="detail-edit"
              @keyup.enter="saveEditing"
              v-model="nodeData.label"
              @blur="saveEditing"
            ></el-input>
          </div>
        </div>
        <!-- 工作任务内容 -->
        <div class="task-work-content">
          <div class="task-detail-left">
            <div class="task-panel">
              <!-- 编辑内容 -->
              <DrawerEditer :editor-value="inputContent" />
              <!-- 标签 -->
              <DrawerTags />
              <!-- 附件 -->
              <DrawerUpload />
            </div>
          </div>
          <div class="task-detail-right">
            <div class="task-panel">
              <!-- 当前工作状态描述 -->
              <el-form
                ref="ruleFormRef"
                style="width: 300px"
                :model="TaskWorkData"
                :rules="rules"
                label-width="auto"
                status-icon
              >
                <!-- 状态 -->
                <el-form-item label="状态" prop="State">
                  <el-select v-model="TaskWorkData.State" placeholder="请选择">
                    <el-option label="新建" value="新建" />
                    <el-option label="进行中" value="进行中" />
                    <el-option label="已完成" value="已完成" />
                    <el-option label="已关闭" value="已关闭" />
                  </el-select>
                </el-form-item>
                <!-- 处理人 -->
                <el-form-item label="处理人" prop="HandlerUser">
                  <el-select
                    v-model="TaskWorkData.HandlerUser"
                    placeholder="请选择"
                  >
                    <el-option label="admin" value="admin" />
                  </el-select>
                </el-form-item>
                <!-- 预计开始日期 -->
                <el-form-item label="预计开始日期" prop="TaskStartDay">
                  <el-config-provider :locale="zhCn">
                    <el-date-picker
                      v-model="TaskWorkData.TaskStartDay"
                      type="date"
                      placeholder="请选择日期"
                      style="width: 100%"
                    />
                  </el-config-provider>
                </el-form-item>
                <!-- 预计结束日期 -->
                <el-form-item label="预计结束日期" prop="TaskEndDay">
                  <el-config-provider :locale="zhCn">
                    <el-date-picker
                      v-model="TaskWorkData.TaskEndDay"
                      type="date"
                      placeholder="请选择日期"
                      style="width: 100%"
                    />
                  </el-config-provider>
                </el-form-item>
                <!-- 优先级顺序 -->
                <el-form-item label="优先级顺序" prop="Order">
                  <el-select
                    filterable
                    v-model="TaskWorkData.Order"
                    placeholder="1"
                  >
                    <el-option
                      v-for="item in 100"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <!-- 优先级 -->
                <el-form-item label="优先级" prop="Priority">
                  <el-select v-model="TaskWorkData.Priority" placeholder="中">
                    <el-option label="低" value="低" />
                    <el-option label="中" value="中" />
                    <el-option label="高" value="高" />
                  </el-select>
                </el-form-item>
                <!-- 重要程度 -->
                <el-form-item label="重要程度" prop="Important">
                  <el-select
                    v-model="TaskWorkData.Important"
                    placeholder="一般"
                  >
                    <el-option label="关键" value="关键" />
                    <el-option label="重要" value="重要" />
                    <el-option label="一般" value="一般" />
                    <el-option label="提示" value="提示" />
                  </el-select>
                </el-form-item>
                <!-- 父工作项 -->
                <el-form-item label="父工作项" prop="NodeParent">
                  <el-input v-model="TaskWorkData.NodeParent" disabled />
                </el-form-item>
                <!-- 领域 -->
                <el-form-item label="领域" prop="Domain">
                  <el-select v-model="TaskWorkData.Domain" placeholder="请选择">
                    <el-option label="网络安全" value="网络安全" />
                    <el-option label="科研项目" value="科研项目" />
                    <el-option label="系统集成" value="系统集成" />
                    <el-option label="软件开发" value="软件开发" />
                  </el-select>
                </el-form-item>
                <!-- 参与人员 -->
                <el-form-item label="参与人员" prop="PartUsers">
                  <el-select
                    v-model="TaskWorkData.PartUsers"
                    multiple
                    clearable
                    collapse-tags
                    placeholder="请选择参与人员"
                    :max-collapse-tags="1"
                  >
                    <el-option
                      v-for="(item, index) in PartUserList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <!-- 预计工时 -->
                <el-form-item label="预计工时" prop="WorkHours">
                  <el-input
                    v-model="TaskWorkData.WorkHours"
                    v-if="!isWorkHoursEditing"
                    @click="startWorkHoursEditing"
                  />
                  <div v-if="isWorkHoursEditing">
                    <el-input-number
                      v-model="WorkHoursNumber"
                      class="mx-4"
                      :min="0"
                      :max="999"
                      controls-position="right"
                      @keyup.up="calculateManDays"
                      @change="calculateManDays"
                      @blur="saveWorkHoursEditing"
                    />人时
                    <el-input-number
                      v-model="WorkDaysNumber"
                      class="mx-4"
                      :min="0"
                      :max="99"
                      controls-position="right"
                      @keyup.up="calculateManHours"
                      @change="calculateManHours"
                      @blur="saveWorkHoursEditing"
                    />人天
                  </div>
                </el-form-item>
                <!-- 完成进度 -->
                <el-form-item label="完成度">
                  <el-progress
                    type="dashboard"
                    :percentage="percentage"
                    :status="percentage == 100 ? 'success' : ''"
                    :color="colors"
                  />
                  <div class="task_finish">
                    <el-button-group>
                      <el-button :icon="Minus" @click="decrease" />
                      <el-button :icon="Plus" @click="increase" />
                    </el-button-group>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
  
<script setup>
import { ref, onMounted } from "vue";
import { ElNotification } from "element-plus";
import DrawerEditer from "./DrawerEditer.vue"; //富文本编辑器组件
import DrawerTags from "./DrawerTags.vue"; // 标签组件
import DrawerUpload from "./DrawerUpload.vue"; //多文件上传组件
import zhCn from "element-plus/es/locale/lang/zh-cn"; //引入中文语言包，使时间选择器显示中文
import { Minus, Plus } from "@element-plus/icons-vue"; //引入图标

const emit = defineEmits(["close"]);
// 工作任务表单数据
const TaskWorkData = ref({
  State: "新建",
  HandlerUser: "admin",
  TaskStartDay: "2024/09/29",
  TaskEndDay: "2024/09/29",
  Order: "1",
  Priority: "中",
  Important: "一般",
  NodeParent: "上一级节点",
  Domain: "",
  PartUsers: [],
  WorkHours: "0.00 | 0.00",
  Finished: "0%",
});

//参与人员数据 后期从数据库中读取
const PartUserList = ref([
  { value: "胡雪", label: "胡雪" },
  { value: "张伯伦", label: "张伯伦" },
  { value: "蔡明", label: "蔡明" },
  { value: "张立峰", label: "张立峰" },
  { value: "李建国", label: "李建国" },
  { value: "王博", label: "王博" },
]);

//输入表单规则
const rules = ref({
  HandlerUser: [{ required: true, message: "请选择处理人", trigger: "blur" }],
  Priority: [{ required: true, message: "请选择优先级", trigger: "blur" }],
  Important: [{ required: true, message: "请选择重要程度", trigger: "blur" }],
  WorkHours: [{ required: true, message: "请选择重要程度", trigger: "blur" }],
});

let props = defineProps({
  nodeData: {
    type: Object,
    default: () => ({}), // 使用函数返回默认值,
  },
  drawerOpen: {
    type: Boolean,
    default: false,
  },
});

const currentUser = ref(JSON.parse(localStorage.getItem("User")).username||"admin");
//定义Drawer状态
const drawerVisible = ref(true);
//定义标题可编辑状态
let isDetailLabelEditing = ref(false);
//定义工时可编辑状态
let isWorkHoursEditing = ref(false);
//定义默认工时
let WorkHoursNumber = ref(0);
//定义默认人天
let WorkDaysNumber = ref(0);
//定义默认完成度
const percentage = ref(0);

//输入富文本框内容
const inputContent = ref("测试内容");

// 在组件挂载后或适当的时机更新 WorkHours
onMounted(() => {
  TaskWorkData.value.WorkHours = displayWorkDaysAndHours();
});

// 进入标题编辑
const startEditing = () => {
  isDetailLabelEditing.value = true;
};

// 退出并保存标题编辑
const saveEditing = () => {
  if (isDetailLabelEditing.value) {
    // 添加检查以确保仅在编辑状态时保存
    isDetailLabelEditing.value = false;
    // 这里可以添加保存逻辑，例如调用API
  }
};

const handleClose = () => {
  drawerVisible.value = false;
  emit("close");
  ElNotification({
    title: "成功",
    message: "自动保存成功",
    type: "success",
  });
};

const displayWorkDaysAndHours = () => {
  return WorkHoursNumber.value + " | " + WorkDaysNumber.value;
};

//点击工时进入编辑状态
const startWorkHoursEditing = () => {
  isWorkHoursEditing.value = true;
};
//退出工时编辑时保存数据状态
const saveWorkHoursEditing = () => {
  TaskWorkData.value.WorkHours = displayWorkDaysAndHours();
  isWorkHoursEditing.value = false;
};
//计算人天/工时
function calculateManDays() {
  WorkDaysNumber.value = (WorkHoursNumber.value / 8).toFixed(2);
}

function calculateManHours() {
  WorkHoursNumber.value = (WorkDaysNumber.value * 8).toFixed(0);
}

//定义完成度操作
const increase = () => {
  percentage.value += 10;
  if (percentage.value > 100) {
    percentage.value = 100;
  }
};
const decrease = () => {
  percentage.value -= 10;
  if (percentage.value < 0) {
    percentage.value = 0;
  }
};
</script>
<style lang="scss" scoped>
.el-drawer__header {
  .title-panel {
    display: flex;

    .tracker-label {
      display: inline-block;
      color: #fff;
      background: var(--base-font-bgcolor);
      border-radius: 2px;
      font-size: var(--base-font-size-sm);
      line-height: 16px;
      padding: 0 5px;
      text-transform: capitalize;
      vertical-align: middle;
    }

    .detail-header-author-name,
    .detail-header-create-time,
    .detail-header-project-name {
      border-left: solid 1px var(--drawer-ui-line);
      margin-left: 8px;
      padding-left: 8px;
      padding-right: 8px;
    }
  }
}

.el-drawer__body {
  .work-item-area {
    display: flex;
    margin: 10px 0;

    .detail-id,
    .detail-label {
      display: block;
      font-size: 18px;
      font-weight: 700;
      word-break: break-all;
      cursor: pointer;
    }

    .detail-label {
      margin-left: 10px;
    }

    :deep(.detail-edit .el-input__inner) {
      font-size: 18px;
      color: #000;
    }
  }
}

.content {
  .task-work-content {
    display: flex;

    .task-detail-left {
      position: relative;
      min-width: 600px;
      border-top: solid 1px #c6c6c6;
      border-right: solid 1px #c6c6c6;

      .task-panel {
        margin: 20px 20px 0 0;
      }
    }

    .task-detail-right {
      position: relative;
      width: 330px;
      padding:0 20px;
      padding-bottom: 15px;
      border-top: solid 1px #c6c6c6;

      .task-panel {
        margin: 20px 0 0 0;
      }
    }
  }

  .task-work-content {
    .task_finish {
      width: 126px;
      text-align: center;
    }
  }
}
</style>